<!DOCTYPE html>
<html lang="zh"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all"/>
    <link rel="stylesheet" th:href="@{/css/public.css}" media="all"/>
</head>
<body class="childrenBody  layui-center">
<form class="layui-form layui-form-pane" lay-filter="deviceParams">
    <div class="layui-form-item">
        <label class="layui-form-label myRequired">设备类型:</label>
        <div class="layui-input-inline">
            <input type="text" id="tree" lay-filter="tree" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label myRequired">参数名称:</label>
        <div class="layui-input-inline">
            <input type="text" name="name" id="name" class="layui-input" maxlength="20"
                   lay-verify="required" lay-reqtext="请输入类型名称" placeholder="类型名称" autocomplete="off">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label myRequired">参数最小值:</label>
        <div class="layui-input-inline">
            <input type="number" name="minValue" id="minValue" class="layui-input" maxlength="20" step="0.1"
                   lay-verify="required" lay-reqtext="请输入参数最小值" placeholder="参数最小值" autocomplete="off">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label myRequired">参数最大值:</label>
        <div class="layui-input-inline">
            <input type="number" name="maxValue" id="maxValue" class="layui-input" maxlength="20" step="0.1"
                   lay-verify="required" lay-reqtext="请输入参数最大值" placeholder="参数最大值" autocomplete="off">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label myRequired">参数单位:</label>
        <div class="layui-input-inline">
            <input type="text" name="unit" id="unit" class="layui-input" maxlength="20"
                   lay-verify="required" lay-reqtext="请输入参数单位" placeholder="参数单位" autocomplete="off">
        </div>
    </div>
    <div class="layui-form-item layui-center top">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="saveParams" id="saveParams">保存</button>
            <button class="layui-btn" lay-submit lay-filter="updateParams" id="updateParams">保存</button>
            <button type="button" class="layui-btn layui-btn-normal" onclick="colsePanl()">取消</button>
            <input type="hidden" name="id" id="id" class="layui-input"/>
        </div>
    </div>
</form>
<script type="text/javascript" th:src="@{/layui/layui.js}"></script>
</body>
<script>

    layui.config({
        base: "/js/modules/"
    }).extend({
        "treeSelect": "treeSelect"
    });
    layui.use(['form', 'laydate', 'jquery', 'common', 'treeSelect'], function () {
        let layDate = layui.laydate,
            form = layui.form,
            common = layui.common,
            layer = layui.layer,
            treeSelect = layui.treeSelect,
            $ = layui.$;
        var selectVal = 0;//
        treeSelect.render({
            // 选择器
            elem: '#tree',
            // 数据
            data: '/device/type/tree',
            // data: '/data/data3.json',
            // 异步加载方式：get/post，默认get
            type: 'get',
            // 占位符
            placeholder: '选择设备类型',
            // 是否开启搜索功能：true/false，默认false
            search: true,
            // 点击回调
            click: function (d) {
                // console.log(d);
                selectVal = d.current.id;
            },
            // 加载完成后的回调函数
            success: function (d) {
                // console.log(d);

                if (!isNaN('[[${deviceParams.id}]]') && '[[${deviceParams.id}]]' != '') {
                    treeSelect.checkNode('tree', '[[${deviceParams.typeId}]]');
                    selectVal = '[[${deviceParams.typeId}]]';
                }
            }
        });
        form.on('submit(saveParams)', function (data) {
            data.field.typeId = selectVal;
            console.log("========"+JSON.stringify(data.field));
            $.ajax({
                url: '/device/params/addDeviceParams',
                type: 'post',
                data: JSON.stringify(data.field),
                contentType: 'application/json;charset=UTF-8',
                success: function (result) {
                    if (result.success == true) {
                        parent.layer.alert(result.message, function () {
                            parent.layer.closeAll();
                            parent.location.reload();
                        });
                    } else {
                        parent.layer.alert(result.message, {icon: 5});
                    }
                }

            });
            return false;
        });
        //修改
        form.on('submit(updateParams)', function (data) {
            data.field.typeId = selectVal;
            $.ajax({
                url: '/device/params/update',
                type: 'post',
                data: JSON.stringify(data.field),
                contentType: 'application/json;charset=UTF-8',
                success: function (result) {
                    if (result.success == true) {
                        parent.layer.alert(result.message, function () {
                            parent.layer.closeAll();
                            parent.location.reload();
                        });
                    } else {
                        parent.layer.alert(result.message, {icon: 5});
                    }
                }
            });
            return false;
        });


        form.val('deviceParams', {
            "name": '[[${deviceParams.name}]]',
            "minValue": '[[${deviceParams.minValue}]]',
            "maxValue": '[[${deviceParams.maxValue}]]',
            "unit": '[[${deviceParams.unit}]]',
            "id": '[[${deviceParams.id}]]'
        });

        if (!isNaN('[[${deviceParams.id}]]') && '[[${deviceParams.id}]]' != '') {
            // selectVal = [[${deviceParams.typeId}]];
            $('#saveParams').hide();
        } else {
            $('#updateParams').hide();
        }
    })


    //取消按钮
    function colsePanl() {
        parent.layui.layer.closeAll();
    }
</script>
</html>
